<template>
  <view class="take-order">
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="填写订单" />
    </view>
    <!-- 进度条 -->
    <view class="process">
      <uni-steps :options="processList" :active="active" activeColor="#2abbaf" />
    </view>
    <!-- 服务项目 -->
    <view class="program">
      <text class="title">服务项目</text>
      <text class="content-text">{{program.name}}</text>
    </view>
    <!-- 项目信息 -->
    <view class="info">
      <uni-card title="项目信息">
        <view class="list">
          <view class="item" @click="callchoiceHospital">
            <text>购药医院</text>
            <text v-if="!hospital.name">请选择医院</text>
            <text v-else class="has">{{hospital.name}}</text>
          </view>
          <view class="item">
            <text>代办时间</text>
            <view class="servicetime">
              <uni-datetime-picker start="2024-08-26" placeholder="请选择代办时间" type="datetime" return-type="timestamp"
                v-model="formData.hopeTime" />
            </view>
          </view>
        </view>
      </uni-card>
    </view>

   <view class="info">
     <uni-card title="药品信息">
       <view class="list">
         <view class="other">
           <text>药品名称和数量</text>
           <textarea v-model="formData.memberRemark" class="has" placeholder="请输入详细的药品信息和数量..."></textarea>
         </view>
         <view class="item" @click="callChoicePaitent">
           <text>就诊人</text>
           <text v-if="!paitent.name">请选择就诊人</text>
           <text v-else class="has">{{paitent.name}}</text>
         </view>
         <view class="item" v-if="paitent.phone">
           <text>就诊人电话</text>
           <text v-if="paitent.phone" class="has">{{paitent.phone}}</text>
         </view>
         
         <view class="item"  @click="callChoiceAddress">  
           <text>收货人</text>
           <text v-if="!address.name">请选择收获人</text>
           <text v-else class="has">{{address.name}}</text>
         </view>
         <view class="item" v-if="address.mobile">
           <text>收货人电话</text>
           <text  class="has">{{address.mobile}}</text>
         </view>
         <view class="item" v-if="address.detailAddress">
           <text>收获地址</text>
           <text class="has">{{address.detailAddress}}</text>
         </view>
       </view>
     </uni-card>
   </view>


  </view>
  <view class="attention">
    <uni-card title="注意事项">
      <view>
        1.如有问题请及时联系客服。
      </view>
      <view>
        2.下单成功后，因个人原因，就诊时间前12小时内取消订单-扣除5%服务费用，就诊时间前6小时内取消订单-扣除10%服务费用，就诊时间前3小时内取消订单-扣除50%服务费用，就诊时间前2小时内取消订单-扣除100%服务费用。
      </view>
    </uni-card>
  </view>
  <view class="agree">
    <checkbox-group @change="agreeTheMent">
      <checkbox value="true">
      </checkbox>
    </checkbox-group>
    <view class="agreetext">
      我已阅读并同意
      <navigator open-type="navigate" url="/pages/order/service-agree/service-agree">
        《服务协议服务条款同意书》
      </navigator>
    </view>

  </view>
  <view class="card">
    <view class="card-content">
      <text class="price">￥ {{ ( program.price/100).toFixed(2)  }}</text>
      <view class="buy-btn" @click="submitOrder">立即下单</view>
    </view>
  </view>
  <!-- 弹出层 -->

  <uni-popup ref="choiceHospital" type="bottom" background-color="#fff">
    <choice-hospital-popu @sendHosptial:value="setHospital"></choice-hospital-popu>
  </uni-popup>
  <uni-popup ref="choicePaitent" type="bottom" background-color="#fff">
    <paitent-popu @sendpaitent:value="setPaitent"></paitent-popu>
  </uni-popup>
  <uni-popup ref="choiceAddress" type="bottom" background-color="#fff">
    <address-popu @sendAddress:value="setAddress"></address-popu>
  </uni-popup>

</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    showToastAndDo
  } from '@/utils/toast.js'
  import {
    useParamStore
  } from '@/stores/query-param';

  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    useUserInfo
  } from '@/stores/userinfo.js';

  const userInfo = useUserInfo()
  //获取参数
  const program = ref({
    cover: null,
    price: 0
  })
  const form = ref({
    serviceTime: null
  })
  onLoad(async (option) => {
    //判断登录信息
    userInfo.getLoginInfo()
    //获取项目信息
    // console.log(option);
    const programId = option.programId
    const staffId = option.staffId
    const result = await http.getRequest("/peizhen/open-city/program/get", {
      id: programId
    })
    if (result.code == 0) {
      program.value = result.data
    } else {
      uni.showToast({
        title: '获取服务信息失败',
        icon: 'error',
        duration: 1000
      })
    }
    //判断是否是从陪诊师护工页面跳转
    if (useParamStore().getChoiceStaff()) {
      staff.value = useParamStore().getChoiceStaff()
      //同时将staff值设为null，清除数据污染
      useParamStore().setChoiceStaff(null)
    }
    //判断是否是从医院页面跳转
    if (useParamStore().getChoiceHospital()) {
      hospital.value = useParamStore().getChoiceHospital()
      //同时将staff值设为null，清除数据污染
      useParamStore().setChoiceHospital(null)
    }
  })
  //进度条
  let active = 0;
  let processList = [{
    title: '填写订单'
  }, {
    title: '在线支付'
  }, {
    title: '服务中'
  }, {
    title: '服务完成'
  }];
  //导航返回
  function goback() {
    uni.navigateBack()
  }
  //获取医院
  const choiceHospital = ref(null)
  const hospital = ref({
    name: null
  })

  function callchoiceHospital() {
    if (choiceHospital.value) {
      console.log(choiceHospital.value)
      choiceHospital.value.open()
    }
  }

  function setHospital(value) {
    hospital.value = value
    console.log(hospital.value.name);
    //关闭弹窗
    choiceHospital.value.close()
  }


  //获取就诊人信息
  const choicePaitent = ref(null)
  const paitent = ref({
    name: ''
  })

  function callChoicePaitent() {
    if (choicePaitent.value) {
      choicePaitent.value.open()
    }
  }

  function setPaitent(value) {
    paitent.value = value
    console.log(paitent.value.name);
    //关闭弹窗
    choicePaitent.value.close()
  }
  //获取收货人信息
  const choiceAddress = ref(null)
  const address = ref({
    
  })
  function callChoiceAddress() {
    if (choiceAddress.value) {
      choiceAddress.value.open()
    }
  }
  
  function setAddress(value) {
    address.value = value
    console.log(value);
    //关闭弹窗
    choiceAddress.value.close()
  }
  //表单提交
  const formData = ref({
    hospitalId: null,
    hospitalName: null,
    hopeTime: null,
    //0，普通订单
    type: 0,
    memberId: null,
    memberRemark: null,
    programId: null,
    programName: null,
    paitentId: null,
    paitentName: null,
    staffId: null,
    staffName: null,
    addressId:null,
    payStatus: 0,
    totalPrice: 0,
    payPrice: 0
  })

  async function submitOrder() {
    if (validateForm()) {
      // 校验通过，执行提交操作  
      const result = await http.postRequest('/peizhen/order/create', formData.value)
      if (result.code == 0) {
        showToastAndDo('下单成功', 'success', 2000, () => {
          uni.navigateTo({
            url: `/pages/order/order-detail/order-medicine-detail?orderId=${result.data}`
          })
        })
      } else if (result.code == 1110000007) {
        showToastAndDo(result.msg, 'none', 2000, () => {
          uni.switchTab({
            url: '/pages/order/index'
          })
        })
      }
    }
  }
  //参数校验和赋值
  function validateForm() {
    formData.value.programId = program.value.id
    formData.value.memberId = userInfo.loginData.userId
    formData.value.programName = program.value.name
    formData.value.hospitalId = hospital.value.id
    formData.value.hospitalName = hospital.value.name
    formData.value.paitentId = paitent.value.id
    formData.value.paitentName = paitent.value.name
    formData.value.paitentPhone = paitent.value.phone
    // formData.value.staffId = staff.value.id
    // formData.value.staffName = staff.value.name
    formData.value.addressId = address.value.id
    formData.value.totalPrice = program.value.price
    formData.value.payPrice = program.value.price
    // 姓名校验（简单示例，实际可能更复杂）  
    if (formData.value.programId == null) {
      uni.showToast({
        title: '请选择项目',
        icon: 'error'
      });
      return false;
    }
    if (!formData.value.hospitalId) {
      uni.showToast({
        title: '请选择医院',
        icon: 'error'
      });
      return false;
    }

    if (!formData.value.paitentId) {
      uni.showToast({
        title: '请选择就诊人',
        icon: 'error'
      });
      return false;
    }
    if (!formData.value.addressId) {
      uni.showToast({
        title: '请选择收获地址',
        icon: 'error'
      });
      return false;
    }
    
    if (!isAgree.value) {
      uni.showToast({
        title: '请阅读服务条款并勾选',
        icon: 'none'
      });
      return false;
    }

    return true;
  }
  //是否同意
  const isAgree = ref(false)

  function agreeTheMent(e) {
    isAgree.value = e.detail.value[0]
    // console.log(isAgree.value);
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .take-order {
    background-color: #f5f5f5;
  }

  .process {
    position: fixed;
    z-index: 100;
    width: 710rpx;
    padding-top: 50rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
    height: 120rpx;
    background-color: #fff;

    ::v-deep .uni-steps__row-title {
      font-size: 35rpx !important;
      text-align: center;
    }

    ::v-deep .uni-steps__row-container {
      margin-top: 15rpx;
    }

    ::v-deep .uni-steps__row-line-item {
      line-height: 30rpx !important;
    }

    ::v-deep .uni-steps__row-circle {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f0f8f7 !important;
    }

    ::v-deep .uni-icons {
      font-size: 60rpx !important;
    }
  }

  .program {
    margin: 190rpx 28rpx 20rpx 28rpx;
    border-radius: 10rpx;
    padding: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    height: 80rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 35rpx;
      color: #3a3a3a;
    }

    .content-text {
      font-size: 30rpx;
      color: #22b9a3;
      font-weight: 700;
    }
  }

  //服务项目
  ::v-deep .uni-card__header-content-title {
    font-size: 35rpx !important;
  }

  .list {
    margin-top: 20rpx;

    .item {
      display: flex;
      justify-content: space-between;
      padding-bottom: 30rpx;
      padding-top: 30rpx;
      border-bottom: 1px solid #B7BDC6;
      color: #888888;

      ::v-deep .uni-date__x-input {
        color: #333333;
      }

    }

    .other {
      padding-bottom: 30rpx;
      padding-top: 30rpx;
      color: #B7BDC6;

      textarea {
        margin-top: 10rpx;
        background-color: #f5f5f5;
        padding: 20rpx;
        border-radius: 15rpx;
        width: 95%;
        height: 150rpx;
      }
    }


    .has {
      color: #333333;
      font-size: 30rpx;
      font-weight: 700;
    }


  }

  // .attention {
  //   
  // }

  //付款按钮
  .card {
    position: fixed;
    bottom: 10rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    background-color: #fff;
  }

  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }

  .price {
    font-size: 45rpx;
    font-weight: bold;
    color: #22b9a3;
  }

  .buy-btn {
    margin-right: 20rpx;
    padding: 10rpx 40rpx;
    width: 200rpx;
    height: 50rpx;
    line-height: 50rpx;
    background-color: #22b9a3;
    color: #fff;
    border-radius: 50rpx;
    text-align: center;
    font-size: 28rpx;
  }

  .agree {
    font-size: 25rpx;
    color: black;
    display: flex;
    padding-bottom: 130rpx;
    margin-left: 28rpx;
    vertical-align: middle;

    .agreetext {
      navigator {
        color: #22b9a3;
        font-weight: 500;
        display: inline;
        text-decoration: underline;
      }
    }

  }
</style>